<template>
  <div style="background-color: #f3f3f3">
    <div   style="border: 1px    ;width: 100%;height:400px;background-color: #ffffff">
      <span>基本信息</span>
<!--      <el-collapse  style="width: 100%;height: 200px" v-model="activeName1" accordion>-->
<!--        <el-collapse-item style="float: right;width: 100%; " title="收起" :name="4" @click="togglePanel(4, 'activeName1')">-->
          <div style=" background-color: #ffffff;">
            <div style="float: left;width: 40%;border: 1px    ">
              <div style="margin-left: 280px">发货方</div>

              <div style="margin-left:  100px">
                <span>发货人姓名:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 65%;height: 40px" id="senderName" type="text" v-model="order.sender_name"><br><br>
              </div>

              <div style="margin-left: 100px; margin-top: 10px">
                <span>发件人地址:</span>
                &nbsp;&nbsp;&nbsp;
                <el-select v-model="order.sender_province_id" placeholder="请选择省份" clearable @change="handleSenderProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
                  <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
                </el-select>
                <el-select placeholder="请选择城市" v-model="order.sender_city_id" clearable @change="handleReceiverCityChange" :style="{ width: '20%', marginRight: '20px' }">
                  <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
                </el-select>
                <el-select placeholder="请选择区域" v-model="order.sender_county_id" clearable :style="{ width: '20%' }">
                  <el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id"></el-option>
                </el-select>
              </div>

              <div style="margin-left: 75px; margin-top: 14px">
                <span>发货人详细地址:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 62%; height: 40px" id="senderName" type="text" v-model="order.sender_address"><br><br>
              </div>



              <div style="margin-left:  100px">
                <span>发货人电话:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 65%;height: 40px" id="senderName" type="text" v-model="order.sender_phone"><br><br>
              </div>

              <div style="margin-left: 100px; float: left;margin-top: 14px">
<!--                <span>下单方式:</span>-->
                <div style="display: flex;margin-top: 70px;margin-left: 80px ;align-items: center;">
                  <input type="radio" id="selfPickup" name="deliveryMethod" value="1" v-model="order.pickup_type">
                  <label for="selfPickup" style="margin-right: 10px;">网点自寄</label>

                  <input type="radio" id="homePickup" name="deliveryMethod" value="2" v-model="order.pickup_type">
                  <label for="homePickup">上门取件</label>
                </div>
              </div>

              <div style="margin-left: 330px; float: left;margin-top: -90px">
<!--                <span>付款发送:</span>-->
                <div style="display: flex;margin-top: 70px;margin-left: 80px ;align-items: center;">
                  <input type="radio" id="selfPickup" name="deliveryMethod1" value="1" v-model="order.payment_method">
                  <label for="selfPickup" style="margin-right: 10px;">预结</label>

                  <input type="radio" id="homePickup" name="deliveryMethod1" value="2" v-model="order.payment_method">
                  <label for="homePickup">到付</label>
                </div>
              </div>



            </div>


            <div style="float: right ;width: 40%;border: 1px    ;margin-right: 150px">
              <div style="margin-left: 280px">收件方</div>

              <div style="margin-left:  100px">
                <span>收件人姓名:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 65%;height: 40px" id="senderName" type="text" v-model="order.receiver_name"><br><br>
              </div>

              <div style="margin-left: 100px;margin-top: 10px">
                <span>收件人地址:</span>
                &nbsp;&nbsp;&nbsp;<el-select style="width: 20%" v-model="order.receiver_province_id" placeholder="请选择省份" clearable @change="handleSenderProvinceChange1"   :style="{ width: '20%', marginRight: '20px' }">
                <el-option  v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
              </el-select>
                <el-select  placeholder="请选择城市" v-model="order.receiver_city_id" clearable  @change="handleReceiverCityChange1" :style="{ width: '20%', marginRight: '20px' }">
                  <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
                </el-select>
                <el-select   placeholder="请选择区域" v-model="order.receiver_county_id" clearable :style="{ width: '20%' }">
                  <el-option v-for="district in districts" :key="district.id" :label="district.name" :value="district.id" ></el-option>
                </el-select>
              </div>
              <div style="margin-left:  75px;margin-top: 14px">
                <span>收件人详细地址:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 62%;height: 40px" id="senderName" type="text" v-model="order.receiver_address"><br><br>
              </div>



              <div style="margin-left:  100px">
                <span>收件人电话:</span>
                &nbsp;&nbsp;&nbsp;<input style="width: 65%;height: 40px" id="senderName" type="text" v-model="order.receiver_phone"><br><br>
              </div>


            </div>
          </div>
<!--        </el-collapse-item>-->
<!--      </el-collapse>-->
    </div>

    <!-- 添加更多的折叠面板 -->
    <div style="width: 100%;height: 400px;margin-top: 20px;border: 1px solid  ;background-color: #ffffff">
      <span>货品信息</span>
<!--      <el-collapse v-model="activeName3" accordion>-->
<!--        <el-collapse-item style="float: right;width: 100%" title="收起" :name="4" @click="togglePanel(4, 'activeName3')">-->
          <div style="margin-left: 350px;width: 53%;height: 300px">
            <el-table :data="items" style="width: 100%" height="250">
              <el-table-column fixed prop="name" label="名称" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="quantity" label="数量" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.quantity"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.unit" readonly placeholder="元"></el-input>
                </template>
              </el-table-column>
<!--              <el-table-column prop="unit" label="货品类型" width="120">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-input v-model="scope.row.goods_type_id"></el-input>-->
<!--                </template>-->
<!--              </el-table-column>-->

              <el-table-column style="width: 10%; height: 100px">
                <template slot-scope="scope">
                <el-select style="height: 50px"  id="type" v-model="scope.row.goods_type_id">
                  <el-option v-for="typeDx in  typeList" :key="typeDx.id" :label="typeDx.name" :value="typeDx.id" ></el-option>
                </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="unit" label="货品重量" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.weight"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="货物体积" width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.volume"></el-input>
                </template>
              </el-table-column>

            </el-table>
<!--            <button @click="toggleNewRow">Add New Row</button>-->
            <el-button @click="addNewRow">新增行</el-button>
          </div>
<!--        </el-collapse-item>-->
<!--      </el-collapse>-->
      <div>
      <div><el-button @click="fun01" style="background-color: #f35810;margin-left: 750px;margin-top: 20px;width: 90px">确认</el-button></div>
        <el-dialog :visible.sync="dialogVisible" title="这是一个模态框">
          <div>发货人:<span v-text="order.sender_name"></span></div>
         <div> 发货人地址:<span v-text="order.sender_address"></span></div>
          <div>发货人电话:<span v-text="order.sender_phone"></span></div>
          <div>收货人:<span v-text="order.receiver_name"></span></div>
          <div>收货人地址:<span v-text="order.receiver_address"></span></div>
          <div>收货人电话:<span v-text="order.receiver_phone"></span></div>
          <div>货品总重量:<span v-text="Zongtotal_weight"></span></div>
          <div>运费:<span v-text="order.amount"></span></div>
          <el-button @click="fun02" style="background-color: #f35810;margin-left: 750px;margin-top: 20px;width: 90px">下单</el-button>
        </el-dialog>
      </div>
    </div>




  </div>
</template>

<script>
import { CreateOrder, Yunfei } from '@/api/xiaorder/xiarder'
import { handleAllProvinces, handleCityChange, handleProvinceChange } from '@/api/order/order'
import { getAllGoodsType } from '@/api/goods/goods_type'


export default {
  data() {
    return {
      Zongtotal_weight:"",
      dialogVisible: false, // 控制模态框显示与隐藏的变量
      typeList:[],
      provinces: [],//省
      cities: [],//市
      districts: [],//区
      cities1: [],//市
      districts1: [],
      order:{
        id:"",
        order_type:"",
        pickup_type:"",
        create_time:"",
        member_id:"",
        receiver_province_id:"",
        receiver_city_id:"",
        receiver_county_id:"",
        receiver_address:"",
        receiver_address_id:"",
        receiver_name:"",
        receiver_phone:"",
        sender_province_id:"",
        sender_city_id:"",
        sender_county_id:"",
        sender_address:"",
        sender_address_id:"",
        sender_name:"",
        sender_phone:"",
        current_agency_id:"",
        payment_method:"",
        payment_status:"",
        amount:"",
        estimated_arrival_time:"",
        // distance:"",
        status:"",
        orderCargoDto:[]
      },
      newItem: { order_id: '',
        tran_order_id: '',
        goods_type_id: '',
        name: '',
        unit: '',
        cargo_value: '',
        cargo_barcode: '',
        quantity: '',
        volume: '',
        weight: '',
        remark: '',
        total_volume: '',
        total_weight: ''
      },
      isNewRowVisible: false,
      activeName1: '',
      activeName2: '',
      activeName3: '',
      items: [
        { name: '', unit: '', quantity: '' }
      ]
    };
  },


  created() {
    //查所有省
    handleAllProvinces().then(res=>{
      this.provinces = res;

    })

    getAllGoodsType().then(res=>{
      console.log(res.data)
      this.typeList=res.data

    })

  },

  methods: {
    async handleSenderProvinceChange(value) {

      if (!value) {
        this.order.sender_city_id = '';
        this.order.sender_county_id = '';
        this.districts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.cities = response
      })
    },

    async handleSenderProvinceChange1(value) {

      if (!value) {
        this.order.receiver_city_id = '';
        this.order.receiver_county_id = '';
        this.districts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.cities = response
      })
    },


    async handleReceiverCityChange(value) {
      if (!value) {
        this.order.sender_county_id = '';
        this.districts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.districts = response
        console.log("收件人区县====" + response);
      })
    },

    async handleReceiverCityChange1(value) {
      if (!value) {
        this.order.receiver_county_id = '';
        this.districts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.districts = response
        console.log("收件人区县====" + response);
      })
    },



    addNewRow() {
      this.items.push({ name: '', quantity: '', unit: '',goods_type_id: '',weight:'',volume:''});
    },
    // toggleNewRow() {
    //   this.items.forEach(item => {
    //     console.log(item);
    //   });
    // },
    // fun01() {
    //   this.order.orderCargoDto=this.items
    //   console.log(this.order)
    //   CreateOrder(this.order).then(res=>{
    //     if(res.data==="成功"){
    //       alert("创建订单成功");
    //       window.location.reload();
    //     }
    //   })
    // },

    fun01(){

      this.order.orderCargoDto=this.items
      this.dialogVisible=true;
      Yunfei(this.order).then(res=>{
        this.order=res
        this.Zongtotal_weight = 0; // 初始化总重量为0
        this.order.orderCargoDto.forEach(cargo => {
          alert(cargo.total_weight)
          this.Zongtotal_weight += cargo.total_weight;
        });
      })
    },

    fun02(){
        console.log(this.order)
        CreateOrder(this.order).then(res=>{
          if(res.data==="成功"){
            // alert("创建订单成功");
            this.$message({
              type: 'success',
              message: '创建订单成功!'
            });
            window.location.reload();
          }
        })
    },

    togglePanel(panelName, activeName) {
      if (this[activeName] === panelName) {
        this[activeName] = '';
      } else {
        this[activeName] = panelName;
      }

      if (this[activeName] === '') {
        if (activeName === 'activeName1') {
          this.activeName1 = '';
        }
        if (activeName === 'activeName2') {
          this.activeName2 = '';
        }
      }
    },

  }
};
</script>
